<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>task1</title>
	<style>
		#main{
			width: 100%;
			height: 300px;
		}

		#tem{
			width: 50%;
			height: 300px;
			float: left;
			margin: auto;
		}

		#hum{
			width: 50%;
			height: 300px;
			float: left;
			margin: auto;
		}

		h1{
			position: absolute;
			color: white;
			top: 66%;
			left: 35%;
			z-index: 100;
		}

	</style>
	<script src="echarts.js"></script>

</head>
<body>
	
	<div id="main"></div>
	<h1>治电科技温湿度实时显示测试</h1>
	<div id="tem"></div>
	<div id="hum"></div>

	<script>

		//页面刷新函数
 		// function freshWeb(){
 		// 	window.location.reload();
 		// }
 	


 		//fetch异步请求函数
 		function status(response){
 		    if(response.status>=200 && response.status<300){
 		        return Promise.resolve(response);
 		    }
 		    else{
 		        return Promise.reject(new Error(response.statusText));
 		    }
 		}
 		function json(response){
 		    return response.json();
 		}
 		//请求数据函数
 		function getData(){
 			//请求温度数据
 			fetch("http://127.0.0.1:3000/tem")
 				.then(status)
 				.then(json)
 				.then(function(data){
 			    	// console.log("请求成功，JSON解析后的响应数据为:",data);
 			    	
 			    	myChart.setOption({
 			    	       
 			    	       series: [{
 			    	           // 根据名字对应到相应的系列
 			    	           name: '温度',
 			    	           data: data
 			    	       }]
 			    	});

 			    	temChart.setOption({
 			    	       
 			    	       series: [{
 			    	           // 根据名字对应到相应的系列
 			    	           data: [{value: data[data.length-1], name: '温度'}]
 			    	       }]
 			    	});
 				})
 				.catch(function(err){
 			    	console.log("Fetch错误:"+err);
 				});

 			//请求湿度数据
 			fetch("http://127.0.0.1:3000/hum")
 				.then(status)
 				.then(json)
 				.then(function(data){
 			    	// console.log("请求成功，JSON解析后的响应数据为:",data);
 			    	myChart.setOption({
 			    	       series: [{
 			    	           // 根据名字对应到相应的系列
 			    	           name: '湿度',
 			    	           data: data
 			    	       }]
 			    	});
 			    	humChart.setOption({
 			    	       series: [{
 			    	           // 根据名字对应到相应的系列
 			    	           data: [{value: data[data.length-1], name: '湿度'}]
 			    	       }]
 			    	});
 				})
 				.catch(function(err){
 			    	console.log("Fetch错误:"+err);
 				});

 		}
 		//更新ECharts数据
		setInterval('getData()',10);

		//初始化echarts
		var myChart = echarts.init(document.getElementById('main'));
		var temChart = echarts.init(document.getElementById('tem'));
		var humChart = echarts.init(document.getElementById('hum'));

		//配置温湿度折线图
		var option ={
			title:{
				text:'温湿度'
			},
			tooltip:{},//提示框
			legend:{//图例组件
				data:['温度','湿度']
			},
			xAxis:{
				data:["1","2","3","4","最新"]
			},
			yAxis:{},
			series: [{
        		name: '温度',
       			type: 'line',
        		data: []
    		},{
    			name:"湿度",
    			type:'line',
    			data:[]
    		}]
		};

		//配置温度实时仪表盘
		var temOption ={
			backgroundColor: '#293C55',
			tooltip : {
				formatter:"{a} <br/> {c} {b}"
			},
			toolbox:{
				show:true,
				feature:{
					mark : {show: true},
					restore : {show: true},
					saveAsImage : {show: true}
				}
			},
			series : [
				{
					name:'温度',
					type:'gauge',
					min:-20,
					max:50,
					splitNumber:10,
					radius: '60%',
					axisLine:{
						lineStyle:{
							color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],
							width:3,
							shadowColor: '#fff',//默认透明
							shadowBlur : 10
						}
					},
					axisLabel:{ //坐标小标记
						textStyle:{
							fontWeight:'bolder',
							color:'#fff',
							shadowColor:'#fff',//默认透明
							shadowBlur: 10
						}
					},
					axisTick:{ //坐标小标记
						length:15,
						lineStyle:{
							color : 'auto',
							shadowColor : '#fff',//默认透明
							shadowBlur:10
						}
					},
					splitLine:{ //分割线
						length: 25, //属性length控制线长
						lineStyle:{
							width:3,
							color:'#fff',
							shadowColor:'#fff', //默认透明
							shadowBlur:10
						}
					},
					pointer:{ //分割线
						shadowColor: '#fff', //默认透明
						shadowBlur: 5
					},
					title:{
						textStyle:{
							fontWeight:'bolder',
							fontSize:20,
							fontStyle:'italic',
							color:'#fff',
							shadowColor:'#fff',//默认透明
							shadowBlur: 10
						}
					},
					detail:{
						backgroundColor:'rgba(30,144,255,0.8)',
						borderWidth:1,
						borderColor:'#fff',
						shadowColor:'#fff',//默认透明
						offsetCenter:[0,'50%'],
						textStyle:{
							fontWeight:'bolder',
							color:'#fff'
						}
					},
					data:[]
				}
			]
		}

		//配置湿度实时仪表盘
		var humOption = {
			backgroundColor: '#293C55',
			tooltip : {
				formatter:"{a} <br/> {c} {b}"
			},
			toolbox:{
				show:true,
				feature:{
					mark : {show: true},
					restore : {show: true},
					saveAsImage : {show: true}
				}
			},
			series : [
				{
					name:'湿度',
					type:'gauge',
					min:20,
					max:100,
					splitNumber:10,
					radius: '60%',
					axisLine:{
						lineStyle:{
							color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],
							width:3,
							shadowColor: '#fff',//默认透明
							shadowBlur : 10
						}
					},
					axisLabel:{ //坐标小标记
						textStyle:{
							fontWeight:'bolder',
							color:'#fff',
							shadowColor:'#fff',//默认透明
							shadowBlur: 10
						}
					},
					axisTick:{ //坐标小标记
						length:15,
						lineStyle:{
							color : 'auto',
							shadowColor : '#fff',//默认透明
							shadowBlur:10
						}
					},
					splitLine:{ //分割线
						length: 25, //属性length控制线长
						lineStyle:{
							width:3,
							color:'#fff',
							shadowColor:'#fff', //默认透明
							shadowBlur:10
						}
					},
					pointer:{ //分割线
						shadowColor: '#fff', //默认透明
						shadowBlur: 5
					},
					title:{
						textStyle:{
							fontWeight:'bolder',
							fontSize:20,
							fontStyle:'italic',
							color:'#fff',
							shadowColor:'#fff',//默认透明
							shadowBlur: 10
						}
					},
					detail:{
						backgroundColor:'rgba(30,144,255,0.8)',
						borderWidth:1,
						borderColor:'#fff',
						shadowColor:'#fff',//默认透明
						offsetCenter:[0,'50%'],
						textStyle:{
							fontWeight:'bolder',
							color:'#fff'
						}
					},
					data:[]
				}
			]
		}


		//使用温湿度折线图配置来画图
		myChart.setOption(option);
		temChart.setOption(temOption);
		humChart.setOption(humOption);


	</script>
</body>

</html>